<template>
  <div>
    <vxe-table
      border
      show-header-overflow
      show-overflow
      highlight-hover-row
      :data="tableData"
      :key="tableKey"
      max-height="500"
    >
      <vxe-table-column
        type="seq"
        title="序号"
        width="60"
        align="center"
        v-if="setting.options.serialNumberVisible"
      ></vxe-table-column>
      <template v-for="element in settingOptions.tableSetting" :key="element">
        <template v-if="!element.isHidden">
          <vxe-table-column
            v-if="!element.isJump"
            :width="element.width"
            :align="element.algin"
            :title="element.lable"
            :field="element.field"
          ></vxe-table-column>
          <vxe-table-column
            v-else
            :width="element.width"
            :align="element.algin"
            :title="element.lable"
          >
            <template v-slot="{ row }">
              <a @click="jumpPath(row, element)">
                {{ row.title }}
              </a>
            </template>
          </vxe-table-column>
        </template>
      </template>
    </vxe-table>
    <a-pagination
      show-size-changer
      @change="pageChange"
      :total="500"
      @showSizeChange="onShowSizeChange"
      :page-size="pageSize"
      v-model="current"
      v-show="setting.options.isPagination"
    />
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { Getsqlcolumns } from '@/api/report/api'

  export default defineComponent({
    props: ['setting'],
    data() {
      return {
        tableData: [], //内容数据
        settingOptions: this.setting.options, //表头数据
        pageSize: 10,
        current: 1,
        tableKey: '',
      }
    },
    created() {
      var that = this
      // console.log('setting', this.setting)
      Getsqlcolumns({
        DbId: that.setting.options.dbId,
        Sql: that.setting.options.sql,
        isdata: true,
      }).then((res) => {
        if (res.isSuccess) {
          this.tableData = res.content.data
        } else {
          this.$message.error('sql语句语法错误' + res.message)
        }
      })
      // if (that.setting.options.isPagination) {
      //   console.log(that.setting.options.sql)
      // }
    },
    // ?id=738d95c2-3a88-bb0c-c94e-39fb84570b97&taskId=5356c20c-7f0e-3e26-3504-39fbe0099181&tabTitle=3月27号测试-发的规划
    methods: {
      jumpPath(row, element) {
        var path = ''
        element.parmas.forEach((item) => {
          path += '?' + item.key + '=' + row[item.value] + '&'
        })
        path = path.substring(0, path.length - 1)
        this.$router.push(element.path + path)
      },
      onShowSizeChange(current, pageSize) {
        this.pageSize = pageSize
        console.log(current, pageSize)
      },
      pageChange(page, pageSize) {
        console.log(page, pageSize)
      },
    },
    watch: {
      'setting.options': {
        deep: true,
        handler() {
          this.tableKey = new Date().getTime()
        },
      },
    },
  })
</script>
